<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="assets/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!--  <link href="framework/icon.css" rel="stylesheet">-->
    <link href="css/reset.css" rel="stylesheet">
    <link href="/dist/output.css" rel="stylesheet">
    <link rel="stylesheet" href="css/iconfont.css">
    <title>饿了么 用户注册</title>
</head>

<body>
<div class="w-full h-full">
    <!--  header部分-->
    <header class="w-full h-12 bg-[#0097FF] text-white text-xl fixed left-0 top-0 z-[1000] flex justify-center items-center "><p>用户登录</p></header>
    <!--        表单部分-->
    <ul class="w-full mt-12">
        <li class="box-border pt-4 pr-3 pb-0 pl-3 flex items-center" >
            <div class="flex grow-0 shrink-0  basis-16 font-[700] text-xs text-[#666]">
                手机号码：
            </div>
            <div class="flex-[1]">
                <input type="text" placeholder="手机号码" class="border-none outline-none w-full h-4 text-xs">
            </div>
        </li>
        <li class="box-border pt-4 pr-3 pb-0 pl-3 flex items-center">
            <div class="flex grow-0 shrink-0  basis-16 font-[700] text-xs text-[#666]">
                密码：
            </div>
            <div class="flex-[1]">
                <input type="password" placeholder="密码" class="border-none outline-none w-full  h-4 text-xs">
            </div>
        </li>
        <li class="box-border  pt-4 pr-3 pb-0 pl-3 flex items-center">
            <div class="flex grow-0 shrink-0  basis-16 font-[700] text-xs text-[#666]">
                确认密码：
            </div>
            <div class="flex-[1]">
                <input type="password" placeholder="确认密码"  class="border-none outline-none w-full h-4 text-xs">
            </div>
        </li>
        <li class="box-border pt-4 pr-3 pb-0 pl-3 flex items-center">
            <div class="flex grow-0 shrink-0  basis-16 font-[700] text-xs text-[#666]">
                性别：
            </div>
            <div class="flex-[1] text-xs" >
                <input type="radio" name="sex" checked  class="w-6 h-3">男
                <input type="radio" name="sex"  class="w-6 h-3">女
            </div>
        </li>
    </ul>
    <div class="w-full box-border pt-4 pr-3 pb-0 pl-3" onclick="location.href='Login.html'">
        <button class="w-full h-10 text-sm text-[700] text-[#666] bg-[#EEE] rounded-[4px] border-none outline-none border-solid border-[1px] border-[#DDD]">注册</button>
    </div>

<!--    底部菜单部分-->
    <ul class="w-full h-14 border-t border-t-[#DDD] bg-white fixed left-0 bottom-0 flex justify-around items-center ">
        <li class="flex flex-col justify-center items-center text-[#999] select-none cursor-pointer " onclick="location.href='index.html'">
            <div class="text-xl leading-none"><i class="i ic:baseline-home"></i></div>
            <p class="text-xs leading-none">首页</p>
        </li>
        <li class="flex flex-col justify-center items-center text-[#999] select-none cursor-pointer ">
            <div class="text-xl leading-none"><i class="i ph:compass"></i></i></div>
            <p class="text-xs leading-none">发现</p>
        </li>
        <li class="flex flex-col justify-center items-center text-[#999] select-none cursor-pointer ">
            <div onclick="location.href='orderList.html'" class="text-xl leading-none"><i class="i mdi:document"></i></div>
            <p class="text-xs leading-none">订单</p>
        </li>
        <li class="flex flex-col justify-center items-center text-[#999] select-none cursor-pointer ">
            <div class="text-xl leading-none"><i class="i ic:baseline-person"></i></div>
            <p class="text-xs leading-none">我的</p>
        </li>

    </ul>
</div>
</body>
</html>